<!-- 新增备品 -->

<template>
  <el-form>
    <WebTable :list="one.children" noPage>
      <RowText label="名称" bind="spareName" />

      <RowText label="型号" bind="model" />

      <RowNum v-if="one.category === 1" label="库存数量" bind="stockNum" />

      <RowSlot :label="`${one.name}数量`" :width="200">
        <template #default="{ row }">
          <!-- 入库数量不限制，出库数量不大于库存数量 -->
          <FormNum :one="getChild(row)" bind="operateNum" :min="1" :max="row.stockNum" noLabel noMargin />
        </template>
      </RowSlot>

      <RowText label="单位" bind="unitName" />

      <RowOperate v-if="!isShow" :btns="['del']" :onDel="toDel" />
    </WebTable>
  </el-form>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'SpareAddList',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb()],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('./', true, /vue$/)),

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    getChild(row) {
      const { children } = this.one
      const matched = children.find(item => item.id === row.id) || {}
      return matched
    },

    toDel(row) {
      const index = this.one.children.findIndex(item => {
        return item === row
      })
      this.one.children.splice(index, 1)
    },
  },
}
</script>
